<%@page contentType="text/html; charset=utf-8"%>
<%@ include file="/WEB-INF/jsp/include.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动态密码管理</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="keywords" content="" />
	<meta http-equiv="description" content="" />
	<link href="${ctx}/css/main.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/js/easyui/themes/default/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="${ctx}/js/easyui/themes/icon.css"/>
	<script type="text/javascript" src="${ctx}/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="${ctx}/js/easyui/jquery.easyui.min.js"></script>
      <script type="text/javascript">
          $(function() {
              $('#qrcode').attr("src", "${ctx}/user/otp.do?action=showQRCode&user.username=${user.username}&user.secretKey=${user.secretKey}");
          });
      </script>
  </head>
  <body>	
  	<div id="main">
   		<div class="titlediv">您所在的位置：动态密码管理</div>
    	<div class="margin_10">
    		<div>
                <div style="margin-left: 100px">欢迎开通动态密码服务！请根据以下提示进行设置：</div>
                <div style="margin: 10px 0px 0px 120px">
                1，请下载安装动态密码生成器，iPhone或Android用户搜索"<strong style="color: #ff0000">google authenticator</strong>"。
                </div>
                <div style="margin: 10px 0px 0px 120px">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Android APK download : <a href="${ctx}/apk/authenticator.apk">google authenticator</a>。
                </div>
                <div style="margin: 10px 0px 0px 120px">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>请确认手机时间与服务器时间正负相差不超过2分钟，系统当前时间为：</strong><span style="color: #ff0000">${now}</span>
                </div>
                <div style="margin: 10px 0px 0px 120px">
                2，根据google authenticator提示，选择手动输入或二维码扫描方式进行验证。
                </div>
                <div style="margin: 10px 0px 0px 140px">
                    手动方式（基于时间）：
                </div>
                <div style="margin: 10px 0px 0px 160px">
                    <span>用户名：${user.username}@sqbj.com
                    </span>
                    <span style="margin-left: 20px">
                          密钥：${user.secretKey}<span style="margin-left: 20px"><a href="${ctx}/user/otp.do?action=change&user.id=${user.id}">更换密钥</a></span>
                    </span>
                </div>
                <div style="margin: 10px 0px 0px 140px">
                    二维码：
                </div>
                <div style="margin: 10px 0px 0px 160px">
                     <img id="qrcode" width="200" height="200" src=""/>
                </div>
                <div style="margin: 10px 0px 0px 120px">
                    3，填入google authenticator显示6位数字，30秒有效期。
                </div>
                <div style="margin: 10px 0px 0px 140px">
                    <form id="theform" action="${ctx}/user/otp.do" method="post">
                        <input type="hidden" name="action" value="register"/>
                        <input type="hidden" name="user.id" value="${user.id}"/>
                        <input type="hidden" name="secretKey" value="${user.secretKey}"/>
                        <input type="text" name="verifyCode" value="" />&nbsp;&nbsp;<span style="color: #ff0000;">${errorMsg}</span>
                        <div id="foot"><input id="sub" type="submit" value="开始验证"/></div>
                    </form>
                </div>
    		</div>
    	</div>
    </div>
  </body>
</html>
